<template>
  <!-- 我的发起 -->
  <div class="table-special-style custom-table-ui">
    <el-table
      v-el-table-infinite-scroll="loadTableFn"
      :infinite-scroll-disabled="!showAll"
      :height="showAll ? '7.15rem' : 'auto'"
      :data="tableData"
       style="width: 100%; "
       @sort-change="sortChange($event)"
      >
      <el-table-column
        type="index"
        width="50">
        <template slot="header" slot-scope="scope">
          序号
        </template>
      </el-table-column>
     

      <el-table-column v-for="(column, index) in tableColumns" :key="column.prop" :label="column.label"
        :min-width="column.width">
        <template slot="header" slot-scope="scoped">
          <template v-if="showAll">
            <span class="column-header">{{ column.label }}</span>
            <el-popover placement="bottom" trigger="click" v-model="popoverVisible[index]" popper-class="table-search-sort"
                @click.native.stop @show="popClick(column,index)">
                <div class="select-pop">
                    <ul class="my-radio">
                        <li class="sort-asc" @click="myRadio('asc',column,index)" >
                            <i class="asc-icon">
                              <svg t="1721878607273" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1456" width="20" height="20">
                                <path
                                    d="M843.84 331.072v434.048a31.488 31.488 0 0 1-9.152 22.848 32.192 32.192 0 0 1-22.912 9.472 32.512 32.512 0 0 1-32-32.32V331.072l-128.192 126.72a31.552 31.552 0 0 1-45.44 0 31.488 31.488 0 0 1 0-44.928l181.312-179.328a31.552 31.552 0 0 1 22.4-9.536 32.896 32.896 0 0 1 23.04 8.32l181.376 179.2a30.912 30.912 0 0 1 0 45.056 32.192 32.192 0 0 1-45.504 0l-124.928-125.44zM32 730.88h512.512c17.728 0 32.064 14.208 32.064 31.68a31.872 31.872 0 0 1-32 31.68H32a31.872 31.872 0 0 1-32-31.68c0-17.472 14.336-31.68 32-31.68z m0-253.44h320.32c17.728 0 32 14.208 32 31.68a31.872 31.872 0 0 1-32 31.68H32.064A31.872 31.872 0 0 1 0 509.12c0-17.472 14.336-31.68 32-31.68zM544.576 224H32.064c-17.728 0-32 14.208-32 31.68s14.272 31.68 32 31.68h512.512c17.728 0 32-14.208 32-31.68a31.872 31.872 0 0 0-32-31.68z"
                                    fill="#8a8a8a" p-id="1457"></path>
                              </svg>
                            </i>
                            <span class="sort-text">按A→Z排序</span>
                            <i v-if="column.selectedSort === 'asc'" class="el-icon-check sort-check-icon"></i>
                        </li>
                        <li class="sort-desc" @click="myRadio('desc',column,index)">
                          <i class="asc-icon">
                            <svg t="1721878904715" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6918" width="20" height="20">
                                <path
                                    d="M843.84 690.368V256.32a31.488 31.488 0 0 0-9.152-22.848 32.192 32.192 0 0 0-22.912-9.472 32.512 32.512 0 0 0-32 32.32v434.048l-128.192-126.72a31.552 31.552 0 0 0-45.44 0 31.488 31.488 0 0 0 0 44.928l181.312 179.328a31.552 31.552 0 0 0 22.4 9.536 32.896 32.896 0 0 0 23.04-8.32l181.376-179.2a30.912 30.912 0 0 0 0-45.056 32.192 32.192 0 0 0-45.504 0l-124.928 125.44zM32 730.88h512.512c17.728 0 32.064 14.208 32.064 31.68a31.872 31.872 0 0 1-32 31.68H32a31.872 31.872 0 0 1-32-31.68c0-17.472 14.336-31.68 32-31.68z m0-253.44h320.32c17.728 0 32 14.208 32 31.68a31.872 31.872 0 0 1-32 31.68H32.064A31.872 31.872 0 0 1 0 509.12c0-17.472 14.336-31.68 32-31.68zM544.576 224H32.064c-17.728 0-32 14.208-32 31.68s14.272 31.68 32 31.68h512.512c17.728 0 32-14.208 32-31.68a31.872 31.872 0 0 0-32-31.68z"
                                    fill="#8a8a8a" p-id="6919"></path>
                            </svg>
                          </i>
                          <span class="sort-text">按Z→A排序</span>
                          <i v-if="column.selectedSort === 'desc'" class="el-icon-check sort-check-icon"></i>
                        </li>
                    </ul>
                    <el-input v-model="column.filterKeyword" placeholder="请输入筛选关键词" size="mini"
                        suffix-icon="el-icon-search" @change="searchTaskFn(column,index)"></el-input>
                </div>
                <i class="el-icon-caret-bottom" slot="reference" :class="{'sort-active': column.selectedSort !== ''}"></i>
            </el-popover>
          </template>
          <template v-else>
            <span class="column-header">{{ column.label }}</span>
            <span class="custom-column-sort">
              <i class="up-arrow" :class="{'sort-active': column.selectedSort == 'asc'}" @click="myRadio2('asc',column,index)"></i>
              <i class="down-arrow" :class="{'sort-active': column.selectedSort == 'desc'}" @click="myRadio2('desc',column,index)"></i>
            </span>
          </template>
        </template>
        <template slot-scope="scope">
          <div v-if="column.prop == 'processTitle'" class="task-title" :title="scope.row.processTitle" @click="openUrl(scope.row.openUrl)">
            <span :class="{'status-icon': scope.row.isImportant}"></span>
            {{ scope.row.processTitle }}
          </div>
          <div v-else-if="column.prop == 'processState'" class="examine-status" :class="{'examine-status1': scope.row.processState == '已完成', 'examine-status2': scope.row.processState == '审批中', 'examine-status3': scope.row.processState == '状态异常'}">
            {{ scope.row.processState }}
          </div>
          <div  v-else-if="column.prop  == 'processCreateData'" class="one-line" :class="{'is-urge': scope.row.isCanCB}">
            {{ scope.row[column.prop] }} <div class="urge-btn" @click="getUrgeTaskFn(scope.row)">催办</div>
          </div>
          <div v-else-if="column.prop == 'targetUser'" class="one-line">
            {{ scope.row[column.prop] }} 
            <div v-if="scope.row.targetUserId !== ''"  @click="getUrgeTaskFn(scope.row)"><img src="../assets/img/cui.png" alt="" style="cursor: pointer;width: 20px;height: 20px;    vertical-align: middle;
    margin-top: -3px;"></div>
          </div>
          <div class="one-line" v-else :title="scope.row[column.prop].length > 10 ? scope.row[column.prop] : ''">
            {{ scope.row[column.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getUrgeTaskApi } from "../api/myHome"
  export default {
    name: '',
    mixins: [],
    components: {
    },
    props: {
      showAll: Boolean,
      tableData: Array
    },
    data () {
      return {
        sid: this._sid,
        tableColumns: [
          { prop: "processTitle", label: "标题", sortType: "", filterKeyword: "", selectedSort: '' , width: '150px'},
          { prop: "targetUser", label: "当前办理人", sortType: "", filterKeyword: "", selectedSort: '' ,width: '50px'},
          { prop: "processState", label: "审批状态", sortType: "", filterKeyword: "", selectedSort: '' ,width: '50px'},
          { prop: "dataInfo", label: "任务耗时分析", sortType: "", filterKeyword: "", selectedSort: '' },
        ],
        popoverVisible: [],
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {
    },
    methods: {
      openUrl(url) {
        window.open(url)
      },
      loadTableFn() {
        this.$emit("loadTableFn", 'create')
      },
      popClick(item, idx) {
            const _this = this;
          console.log(item, 'item的数据1')
          console.log(idx, 'idx的数据1')
          _this.radioIdx = idx;
      },
      myRadio(part, item, idx) {
        console.log("133311", part)
        // 更新对应列的 selectedSort 属性
        this.tableColumns[idx].selectedSort = part;
        this.$emit('searchTaskFn', {type: 'create', column : item, index: idx})
      },
      myRadio2(part, item, idx) {
        this.tableColumns[idx].selectedSort = part;
        console.log('part', this.tableColumns[idx])
        this.$emit('sortTaskFn', {type: 'create', column : this.tableColumns[idx], index: idx})
      },
      searchTaskFn(column,index) {
        this.$emit('searchTaskFn', {type: 'create', column : column, index: index})
      },
      sortChange({ column, prop, order }) {
        console.log("ccc", column);
      },
      getUrgeTaskFn(item) {
        console.log(item)
        this.$confirm(`确认向办理人${item.targetUser}发起催办?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          title: '',
          showClose: false,
          customClass: 'message-confirm-custom',
          center: true,
        }).then(() => {
          getUrgeTaskApi(this.sid, item.targetUserId, item.processInstId).then(res => {
            if(res.result == "ok") {
              this.$emit('urgeTaskSearchFn')
              this.$message({
                message: '催办成功',
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消催办'
          });
        })

      },
    }
  }
</script>

<style scoped lang="scss">
  .one-line{
    display: flex;
    align-items: center;
  }
</style>
